<!DOCTYPE html>
<html lang="zh-CN" class="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微博 - 发现新鲜事</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- Tailwind 配置 -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#E6162D", // 微博红色
              secondary: "#14171A",
              light: "#F5F8FA",
              "gray-medium": "#657786",
              "gray-light": "#AAB8C2",
              "gray-hover": "#E1E8ED",
              // 暗黑模式颜色
              "dark-bg": "#121212",
              "dark-card": "#1E1E1E",
              "dark-text": "#E0E0E0",
              "dark-text-secondary": "#9E9E9E",
              "dark-border": "#333333",
            },
            fontFamily: {
              sans: ["PingFang SC", "Helvetica Neue", "Arial", "sans-serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .text-shadow {
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .card-hover {
          transition: transform 0.2s, box-shadow 0.2s;
        }
        .card-hover:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
      }
    </style>
  </head>
  <body
    class="bg-light font-sans text-secondary dark:bg-dark-bg dark:text-dark-text transition-colors duration-300"
  >
    <!-- 顶部导航栏 - 在滚动时固定 -->
    <header
      id="main-header"
      class="bg-white shadow-sm transition-all duration-300 z-50 dark:bg-dark-card dark:shadow-gray-900/20"
    >
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <!-- 左侧Logo和导航 -->
          <div class="flex items-center space-x-8">
            <a
              href="#"
              class="text-primary text-2xl font-bold flex items-center"
            >
              <i class="fa fa-weibo mr-2"></i>
              <span class="hidden md:inline">微博</span>
            </a>

            <nav class="hidden md:flex space-x-6">
              <a href="#" class="flex items-center text-primary font-medium">
                <i class="fa fa-home mr-1"></i> 首页
              </a>
              <a
                href="#"
                class="flex items-center text-gray-medium hover:text-primary transition-colors dark:text-dark-text-secondary dark:hover:text-primary"
              >
                <i class="fa fa-compass mr-1"></i> 发现
              </a>
              <a
                href="#"
                class="flex items-center text-gray-medium hover:text-primary transition-colors dark:text-dark-text-secondary dark:hover:text-primary"
              >
                <i class="fa fa-bell mr-1"></i> 通知
              </a>
            </nav>
          </div>

          <!-- 中间搜索框 -->
          <div class="hidden md:block relative w-1/3">
            <input
              type="text"
              placeholder="搜索微博、用户"
              class="w-full py-2 px-4 pl-10 rounded-full bg-light border border-gray-light focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all dark:bg-dark-bg dark:border-dark-border dark:text-dark-text"
            />
            <i
              class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-medium dark:text-dark-text-secondary"
            ></i>
          </div>

          <!-- 右侧用户操作 -->
          <div class="flex items-center space-x-4">
            <button
              class="md:hidden text-gray-medium hover:text-primary transition-colors dark:text-dark-text-secondary"
            >
              <i class="fa fa-search text-xl"></i>
            </button>

            <!-- 暗黑模式切换按钮 -->
            <button
              id="theme-toggle"
              class="p-2 rounded-full hover:bg-gray-hover transition-colors dark:hover:bg-dark-border"
            >
              <i
                class="fa fa-moon-o text-gray-medium dark:hidden dark:text-dark-text-secondary"
              ></i>
              <i class="fa fa-sun-o text-yellow-400 hidden dark:block"></i>
            </button>

            <button
              class="hidden md:flex items-center justify-center w-10 h-10 rounded-full bg-primary text-white hover:bg-opacity-90 transition-colors"
            >
              <i class="fa fa-plus"></i>
            </button>

            <div class="relative group">
              <button class="flex items-center space-x-1 focus:outline-none">
                <img
                  src="https://picsum.photos/id/64/200"
                  alt="用户头像"
                  class="w-8 h-8 rounded-full object-cover border-2 border-transparent hover:border-primary transition-all"
                />
                <span class="hidden md:inline font-medium">张小明</span>
                <i
                  class="fa fa-angle-down text-gray-medium group-hover:rotate-180 transition-transform duration-200 dark:text-dark-text-secondary"
                ></i>
              </button>

              <!-- 用户下拉菜单 -->
              <div
                class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden group-hover:block transition-all z-50 dark:bg-dark-card dark:border dark:border-dark-border"
              >
                <a
                  href="#"
                  class="block px-4 py-2 text-sm hover:bg-gray-hover transition-colors dark:hover:bg-dark-border"
                >
                  <i
                    class="fa fa-user mr-2 text-gray-medium dark:text-dark-text-secondary"
                  ></i
                  >个人主页
                </a>
                <a
                  href="#"
                  class="block px-4 py-2 text-sm hover:bg-gray-hover transition-colors dark:hover:bg-dark-border"
                >
                  <i
                    class="fa fa-cog mr-2 text-gray-medium dark:text-dark-text-secondary"
                  ></i
                  >设置
                </a>
                <div
                  class="border-t border-gray-light my-1 dark:border-dark-border"
                ></div>
                <a
                  href="#"
                  class="block px-4 py-2 text-sm text-primary hover:bg-gray-hover transition-colors dark:hover:bg-dark-border"
                >
                  <i class="fa fa-sign-out mr-2"></i>退出登录
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
      <div class="flex flex-col md:flex-row gap-6">
        <!-- 左侧边栏 - 个人信息和导航 -->
        <aside class="md:w-64 lg:w-72 space-y-6">
          <!-- 个人资料卡片 -->
          <div
            class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
          >
            <div class="h-14 bg-gradient-to-r from-red-500 to-primary relative">
              <button
                class="absolute right-3 top-3 text-white bg-black bg-opacity-30 p-1.5 rounded-full hover:bg-opacity-50 transition-colors"
              >
                <i class="fa fa-pencil"></i>
              </button>
            </div>

            <div class="px-5 pb-5 -mt-10">
              <div class="flex justify-between items-end mb-4">
                <img
                  src="https://picsum.photos/id/64/200"
                  alt="用户头像"
                  class="w-20 h-20 rounded-full border-4 border-white dark:border-dark-card object-cover"
                />
                <button
                  class="bg-primary text-white px-4 py-1.5 rounded-full text-sm font-medium hover:bg-opacity-90 transition-colors"
                >
                  编辑资料
                </button>
              </div>

              <h3 class="font-bold text-lg">张小明</h3>
              <p
                class="text-gray-medium text-sm mb-4 dark:text-dark-text-secondary"
              >
                @zhangxiaoming
              </p>

              <div class="flex justify-between text-center mb-4">
                <div>
                  <p class="font-bold">286</p>
                  <p
                    class="text-gray-medium text-xs dark:text-dark-text-secondary"
                  >
                    关注
                  </p>
                </div>
                <div>
                  <p class="font-bold">1.2k</p>
                  <p
                    class="text-gray-medium text-xs dark:text-dark-text-secondary"
                  >
                    粉丝
                  </p>
                </div>
                <div>
                  <p class="font-bold">3.5k</p>
                  <p
                    class="text-gray-medium text-xs dark:text-dark-text-secondary"
                  >
                    微博
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- 左侧导航菜单 -->
          <div
            class="bg-white rounded-xl shadow-sm p-2 card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
          >
            <nav class="space-y-1">
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-primary font-medium"
              >
                <i class="fa fa-home w-6"></i>
                <span>首页</span>
              </a>
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-gray-medium hover:bg-gray-hover transition-colors dark:text-dark-text-secondary dark:hover:bg-dark-border"
              >
                <i class="fa fa-compass w-6"></i>
                <span>发现</span>
              </a>
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-gray-medium hover:bg-gray-hover transition-colors dark:text-dark-text-secondary dark:hover:bg-dark-border"
              >
                <i class="fa fa-bell w-6"></i>
                <span>通知</span>
                <span
                  class="ml-auto bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
                  >8</span
                >
              </a>
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-gray-medium hover:bg-gray-hover transition-colors dark:text-dark-text-secondary dark:hover:bg-dark-border"
              >
                <i class="fa fa-envelope w-6"></i>
                <span>私信</span>
              </a>
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-gray-medium hover:bg-gray-hover transition-colors dark:text-dark-text-secondary dark:hover:bg-dark-border"
              >
                <i class="fa fa-bookmark w-6"></i>
                <span>收藏</span>
              </a>
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-gray-medium hover:bg-gray-hover transition-colors dark:text-dark-text-secondary dark:hover:bg-dark-border"
              >
                <i class="fa fa-list-alt w-6"></i>
                <span>话题</span>
              </a>
            </nav>

            <div
              class="border-t border-gray-light my-2 dark:border-dark-border"
            ></div>

            <nav class="space-y-1">
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-gray-medium hover:bg-gray-hover transition-colors dark:text-dark-text-secondary dark:hover:bg-dark-border"
              >
                <i class="fa fa-user w-6"></i>
                <span>个人主页</span>
              </a>
              <a
                href="#"
                class="flex items-center px-4 py-3 rounded-lg text-gray-medium hover:bg-gray-hover transition-colors dark:text-dark-text-secondary dark:hover:bg-dark-border"
              >
                <i class="fa fa-cog w-6"></i>
                <span>设置</span>
              </a>
            </nav>
          </div>
        </aside>

        <!-- 中间内容区 - 微博流 -->
        <section class="flex-1 max-w-2xl mx-auto">
          <!-- 发布微博框 -->
          <div
            class="bg-white rounded-xl shadow-sm p-4 mb-6 card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
          >
            <div class="flex space-x-3">
              <img
                src="https://picsum.photos/id/64/200"
                alt="用户头像"
                class="w-10 h-10 rounded-full object-cover"
              />
              <div class="flex-1">
                <textarea
                  placeholder="有什么新鲜事想分享给大家？"
                  class="w-full border border-gray-light rounded-full p-3 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none h-16 dark:bg-dark-bg dark:border-dark-border dark:text-dark-text"
                ></textarea>

                <div class="flex justify-between items-center mt-3">
                  <div class="flex space-x-4 text-primary">
                    <button class="hover:text-primary/80 transition-colors">
                      <i class="fa fa-image text-xl"></i>
                    </button>
                    <button class="hover:text-primary/80 transition-colors">
                      <i class="fa fa-video-camera text-xl"></i>
                    </button>
                    <button class="hover:text-primary/80 transition-colors">
                      <i class="fa fa-smile-o text-xl"></i>
                    </button>
                    <button class="hover:text-primary/80 transition-colors">
                      <i class="fa fa-map-marker text-xl"></i>
                    </button>
                  </div>
                  <button
                    class="bg-primary text-white px-5 py-1.5 rounded-full text-sm font-medium hover:bg-opacity-90 transition-colors"
                  >
                    发布
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 微博过滤器 -->
          <div
            class="bg-white rounded-xl shadow-sm mb-6 dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
          >
            <div
              class="flex border-b border-gray-light dark:border-dark-border"
            >
              <button
                class="flex-1 py-4 text-center font-medium text-primary border-b-2 border-primary"
              >
                关注
              </button>
              <button
                class="flex-1 py-4 text-center font-medium text-gray-medium hover:text-primary transition-colors dark:text-dark-text-secondary"
              >
                推荐
              </button>
            </div>
          </div>

          <!-- 微博列表 -->
          <div class="space-y-6">
            <!-- 微博1 -->
            <article
              class="bg-white rounded-xl shadow-sm p-4 card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
            >
              <div class="flex space-x-3">
                <img
                  src="https://picsum.photos/id/237/200"
                  alt="用户头像"
                  class="w-10 h-10 rounded-full object-cover"
                />
                <div class="flex-1">
                  <div class="flex items-center justify-between">
                    <div>
                      <h4 class="font-medium">科技日报</h4>
                      <p
                        class="text-gray-medium text-sm dark:text-dark-text-secondary"
                      >
                        @techdaily · 2小时前
                      </p>
                    </div>
                    <button
                      class="text-gray-medium hover:text-gray-700 transition-colors dark:text-dark-text-secondary"
                    >
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </div>

                  <div class="mt-2">
                    <p>
                      【我国成功发射新一代通信技术试验卫星】今日，我国在西昌卫星发射中心使用长征三号乙运载火箭，成功将新一代通信技术试验卫星发射升空，卫星顺利进入预定轨道，发射任务获得圆满成功。此次任务是长征系列运载火箭的第478次飞行。
                    </p>

                    <div class="mt-3 rounded-lg overflow-hidden">
                      <img
                        src="https://picsum.photos/id/1/600/400"
                        alt="卫星发射图片"
                        class="w-full h-auto object-cover"
                      />
                    </div>
                  </div>

                  <div
                    class="flex justify-between mt-4 text-gray-medium dark:text-dark-text-secondary"
                  >
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors group"
                    >
                      <i class="fa fa-comment-o group-hover:animate-pulse"></i>
                      <span>328</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-green-500 transition-colors group"
                    >
                      <i
                        class="fa fa-retweet group-hover:rotate-180 transition-transform"
                      ></i>
                      <span>567</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors group"
                    >
                      <i class="fa fa-heart-o group-hover:animate-pulse"></i>
                      <span>1.2k</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors"
                    >
                      <i class="fa fa-share-alt"></i>
                    </button>
                  </div>
                </div>
              </div>
            </article>

            <!-- 微博2 -->
            <article
              class="bg-white rounded-xl shadow-sm p-4 card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
            >
              <div class="flex space-x-3">
                <img
                  src="https://picsum.photos/id/177/200"
                  alt="用户头像"
                  class="w-10 h-10 rounded-full object-cover"
                />
                <div class="flex-1">
                  <div class="flex items-center justify-between">
                    <div>
                      <h4 class="font-medium">美食家小李</h4>
                      <p
                        class="text-gray-medium text-sm dark:text-dark-text-secondary"
                      >
                        @foodie_xiaoli · 5小时前
                      </p>
                    </div>
                    <button
                      class="text-gray-medium hover:text-gray-700 transition-colors dark:text-dark-text-secondary"
                    >
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </div>

                  <div class="mt-2">
                    <p>
                      今天尝试做了一道红烧肉，用了妈妈教的秘方，加入了一点点冰糖和八角，肉质鲜嫩多汁，肥而不腻！分享给大家做法：
                    </p>
                    <p
                      class="mt-2 text-gray-medium dark:text-dark-text-secondary"
                    >
                      1. 五花肉切块焯水；2. 热油炒糖色；3. 加入肉块翻炒上色；4.
                      加调料焖煮40分钟...
                    </p>

                    <div
                      class="mt-3 grid grid-cols-2 gap-2 rounded-lg overflow-hidden"
                    >
                      <img
                        src="https://picsum.photos/id/292/300/300"
                        alt="红烧肉图片1"
                        class="w-full h-32 object-cover"
                      />
                      <img
                        src="https://picsum.photos/id/431/300/300"
                        alt="红烧肉图片2"
                        class="w-full h-32 object-cover"
                      />
                    </div>
                  </div>

                  <div
                    class="flex justify-between mt-4 text-gray-medium dark:text-dark-text-secondary"
                  >
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors"
                    >
                      <i class="fa fa-comment-o"></i>
                      <span>892</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-green-500 transition-colors"
                    >
                      <i class="fa fa-retweet"></i>
                      <span>342</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors"
                    >
                      <i class="fa fa-heart-o"></i>
                      <span>2.5k</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors"
                    >
                      <i class="fa fa-share-alt"></i>
                    </button>
                  </div>

                  <!-- 热门评论 -->
                  <div
                    class="mt-4 pt-4 border-t border-gray-light dark:border-dark-border"
                  >
                    <h5 class="font-medium mb-3">热门评论</h5>
                    <div class="space-y-3">
                      <div class="flex space-x-2">
                        <img
                          src="https://picsum.photos/id/342/200"
                          alt="评论用户头像"
                          class="w-8 h-8 rounded-full object-cover"
                        />
                        <div
                          class="bg-gray-hover rounded-lg p-2 flex-1 dark:bg-dark-border"
                        >
                          <div class="flex items-center">
                            <h6 class="font-medium text-sm">吃货小王</h6>
                            <span
                              class="text-gray-medium text-xs ml-2 dark:text-dark-text-secondary"
                              >2小时前</span
                            >
                          </div>
                          <p class="text-sm mt-1">
                            看起来太美味了！请问焖煮的时候需要盖盖子吗？
                          </p>
                        </div>
                      </div>

                      <div class="flex space-x-2 ml-10">
                        <img
                          src="https://picsum.photos/id/177/200"
                          alt="回复用户头像"
                          class="w-7 h-7 rounded-full object-cover"
                        />
                        <div
                          class="bg-gray-hover rounded-lg p-2 flex-1 dark:bg-dark-border"
                        >
                          <div class="flex items-center">
                            <h6 class="font-medium text-sm">
                              美食家小李
                              <span class="text-primary text-xs ml-1"
                                >作者</span
                              >
                            </h6>
                            <span
                              class="text-gray-medium text-xs ml-2 dark:text-dark-text-secondary"
                              >1小时前</span
                            >
                          </div>
                          <p class="text-sm mt-1">
                            是的，必须盖盖子焖煮，这样才能锁住水分和香味～
                          </p>
                        </div>
                      </div>
                    </div>

                    <button
                      class="w-full text-center text-primary text-sm mt-3 hover:bg-gray-hover py-1 rounded transition-colors dark:hover:bg-dark-border"
                    >
                      查看全部892条评论
                    </button>
                  </div>
                </div>
              </div>
            </article>

            <!-- 微博3 -->
            <article
              class="bg-white rounded-xl shadow-sm p-4 card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
            >
              <div class="flex space-x-3">
                <img
                  src="https://picsum.photos/id/325/200"
                  alt="用户头像"
                  class="w-10 h-10 rounded-full object-cover"
                />
                <div class="flex-1">
                  <div class="flex items-center justify-between">
                    <div>
                      <h4 class="font-medium">旅行摄影师阿杰</h4>
                      <p
                        class="text-gray-medium text-sm dark:text-dark-text-secondary"
                      >
                        @travel_ajie · 昨天
                      </p>
                    </div>
                    <button
                      class="text-gray-medium hover:text-gray-700 transition-colors dark:text-dark-text-secondary"
                    >
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </div>

                  <div class="mt-2">
                    <p>
                      分享一组昨天拍摄的日出照片，凌晨4点起床爬到山顶等待，虽然过程很辛苦，但当第一缕阳光洒向大地时，一切都值得了！#旅行摄影#
                      #日出#
                    </p>

                    <div
                      class="mt-3 grid grid-cols-3 gap-1 rounded-lg overflow-hidden"
                    >
                      <img
                        src="https://picsum.photos/id/110/300/300"
                        alt="日出照片1"
                        class="w-full h-24 object-cover"
                      />
                      <img
                        src="https://picsum.photos/id/164/300/300"
                        alt="日出照片2"
                        class="w-full h-24 object-cover"
                      />
                      <img
                        src="https://picsum.photos/id/184/300/300"
                        alt="日出照片3"
                        class="w-full h-24 object-cover"
                      />
                    </div>
                  </div>

                  <div
                    class="flex justify-between mt-4 text-gray-medium dark:text-dark-text-secondary"
                  >
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors"
                    >
                      <i class="fa fa-comment-o"></i>
                      <span>456</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-green-500 transition-colors"
                    >
                      <i class="fa fa-retweet"></i>
                      <span>789</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors"
                    >
                      <i class="fa fa-heart-o"></i>
                      <span>5.2k</span>
                    </button>
                    <button
                      class="flex items-center space-x-1 hover:text-primary transition-colors"
                    >
                      <i class="fa fa-share-alt"></i>
                    </button>
                  </div>
                </div>
              </div>
            </article>

            <!-- 加载更多按钮 -->
            <div class="text-center py-4">
              <button
                class="bg-white text-primary border border-primary px-6 py-2 rounded-full text-sm font-medium hover:bg-primary hover:text-white transition-colors dark:bg-dark-card dark:border-dark-border"
              >
                加载更多
              </button>
            </div>
          </div>
        </section>

        <!-- 右侧边栏 - 热门话题和推荐关注 -->
        <aside class="hidden lg:block w-80 space-y-6">
          <!-- 搜索框 -->
          <div
            class="bg-white rounded-xl shadow-sm p-4 dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
          >
            <div class="relative">
              <input
                type="text"
                placeholder="搜索微博、用户"
                class="w-full py-2 px-4 pl-10 rounded-full bg-light border border-gray-light focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all dark:bg-dark-bg dark:border-dark-border dark:text-dark-text"
              />
              <i
                class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-medium dark:text-dark-text-secondary"
              ></i>
            </div>
          </div>

          <!-- 热门话题 -->
          <div
            class="bg-white rounded-xl shadow-sm p-4 card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
          >
            <div class="flex justify-between items-center mb-4">
              <h3 class="font-bold text-lg">热门话题</h3>
              <a
                href="#"
                class="text-gray-medium text-sm hover:text-primary transition-colors dark:text-dark-text-secondary"
                >更多</a
              >
            </div>

            <div class="space-y-4">
              <div>
                <p class="text-xs text-primary font-medium"># 科技突破 #</p>
                <p class="font-medium mt-1">我国新一代通信卫星发射成功</p>
                <p
                  class="text-gray-medium text-xs mt-1 dark:text-dark-text-secondary"
                >
                  128.5万讨论
                </p>
              </div>

              <div>
                <p class="text-xs text-primary font-medium"># 美食分享 #</p>
                <p class="font-medium mt-1">家常红烧肉的秘方大公开</p>
                <p
                  class="text-gray-medium text-xs mt-1 dark:text-dark-text-secondary"
                >
                  89.2万讨论
                </p>
              </div>

              <div>
                <p class="text-xs text-primary font-medium"># 旅行日记 #</p>
                <p class="font-medium mt-1">山顶日出的绝美瞬间</p>
                <p
                  class="text-gray-medium text-xs mt-1 dark:text-dark-text-secondary"
                >
                  67.3万讨论
                </p>
              </div>

              <div>
                <p class="text-xs text-primary font-medium"># 体育赛事 #</p>
                <p class="font-medium mt-1">国足迎来新教练团队</p>
                <p
                  class="text-gray-medium text-xs mt-1 dark:text-dark-text-secondary"
                >
                  215.7万讨论
                </p>
              </div>
            </div>
          </div>

          <!-- 推荐关注 -->
          <div
            class="bg-white rounded-xl shadow-sm p-4 card-hover dark:bg-dark-card dark:shadow-gray-900/20 transition-colors duration-300"
          >
            <div class="flex justify-between items-center mb-4">
              <h3 class="font-bold text-lg">推荐关注</h3>
              <a
                href="#"
                class="text-gray-medium text-sm hover:text-primary transition-colors dark:text-dark-text-secondary"
                >换一批</a
              >
            </div>

            <div class="space-y-4">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                  <img
                    src="https://picsum.photos/id/1027/200"
                    alt="推荐用户头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <h4 class="font-medium">自然探索者</h4>
                    <p
                      class="text-gray-medium text-xs dark:text-dark-text-secondary"
                    >
                      @nature_explorer
                    </p>
                  </div>
                </div>
                <button
                  class="text-primary border border-primary px-3 py-1 rounded-full text-sm hover:bg-primary hover:text-white transition-colors"
                >
                  关注
                </button>
              </div>

              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                  <img
                    src="https://picsum.photos/id/1062/200"
                    alt="推荐用户头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <h4 class="font-medium">音乐达人</h4>
                    <p
                      class="text-gray-medium text-xs dark:text-dark-text-secondary"
                    >
                      @music_lover
                    </p>
                  </div>
                </div>
                <button
                  class="text-primary border border-primary px-3 py-1 rounded-full text-sm hover:bg-primary hover:text-white transition-colors"
                >
                  关注
                </button>
              </div>

              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                  <img
                    src="https://picsum.photos/id/1074/200"
                    alt="推荐用户头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <h4 class="font-medium">电影评论人</h4>
                    <p
                      class="text-gray-medium text-xs dark:text-dark-text-secondary"
                    >
                      @movie_critic
                    </p>
                  </div>
                </div>
                <button
                  class="text-primary border border-primary px-3 py-1 rounded-full text-sm hover:bg-primary hover:text-white transition-colors"
                >
                  关注
                </button>
              </div>
            </div>

            <button
              class="w-full text-center text-primary text-sm mt-3 hover:bg-gray-hover py-1 rounded transition-colors dark:hover:bg-dark-border"
            >
              查看更多推荐
            </button>
          </div>

          <!-- 微博版权信息 -->
          <div class="text-gray-medium text-xs dark:text-dark-text-secondary">
            <div class="flex flex-wrap gap-x-4 gap-y-2 mb-3">
              <a href="#" class="hover:text-primary transition-colors"
                >关于我们</a
              >
              <a href="#" class="hover:text-primary transition-colors"
                >服务条款</a
              >
              <a href="#" class="hover:text-primary transition-colors"
                >隐私政策</a
              >
              <a href="#" class="hover:text-primary transition-colors"
                >帮助中心</a
              >
              <a href="#" class="hover:text-primary transition-colors"
                >广告服务</a
              >
              <a href="#" class="hover:text-primary transition-colors"
                >开放平台</a
              >
            </div>
            <p>© 2023 微博 版权所有</p>
          </div>
        </aside>
      </div>
    </main>

    <!-- 移动端底部导航 -->
    <nav
      class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-light z-40 dark:bg-dark-card dark:border-dark-border transition-colors duration-300"
    >
      <div class="flex justify-around">
        <a href="#" class="flex flex-col items-center py-2 px-4 text-primary">
          <i class="fa fa-home text-xl"></i>
          <span class="text-xs mt-1">首页</span>
        </a>
        <a
          href="#"
          class="flex flex-col items-center py-2 px-4 text-gray-medium hover:text-primary transition-colors dark:text-dark-text-secondary"
        >
          <i class="fa fa-compass text-xl"></i>
          <span class="text-xs mt-1">发现</span>
        </a>
        <a href="#" class="flex flex-col items-center py-2 px-4">
          <div
            class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center -mt-5 shadow-lg"
          >
            <i class="fa fa-plus text-xl"></i>
          </div>
        </a>
        <a
          href="#"
          class="flex flex-col items-center py-2 px-4 text-gray-medium hover:text-primary transition-colors dark:text-dark-text-secondary"
        >
          <i class="fa fa-bell text-xl"></i>
          <span class="text-xs mt-1">通知</span>
        </a>
        <a
          href="#"
          class="flex flex-col items-center py-2 px-4 text-gray-medium hover:text-primary transition-colors dark:text-dark-text-secondary"
        >
          <i class="fa fa-user text-xl"></i>
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </nav>

    <!-- JavaScript -->
    <script>
      // 暗黑模式切换功能
      const themeToggle = document.getElementById("theme-toggle");
      const htmlElement = document.documentElement;

      // 检查用户偏好或保存的设置
      if (
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        htmlElement.classList.add("dark");
      } else {
        htmlElement.classList.remove("dark");
      }

      // 切换暗黑模式
      themeToggle.addEventListener("click", () => {
        htmlElement.classList.toggle("dark");

        // 保存用户设置
        if (htmlElement.classList.contains("dark")) {
          localStorage.theme = "dark";
        } else {
          localStorage.theme = "light";
        }
      });

      // 导航栏滚动效果
      window.addEventListener("scroll", function () {
        const header = document.getElementById("main-header");
        if (window.scrollY > 10) {
          header.classList.add("shadow");
          header.classList.remove("shadow-sm");
        } else {
          header.classList.remove("shadow");
          header.classList.add("shadow-sm");
        }
      });

      // 点赞按钮动画
      document.querySelectorAll(".fa-heart-o").forEach((heart) => {
        heart.addEventListener("click", function () {
          this.classList.toggle("fa-heart-o");
          this.classList.toggle("fa-heart");
          this.classList.toggle("text-primary");

          // 添加点赞动画
          this.classList.add("animate-bounce");
          setTimeout(() => {
            this.classList.remove("animate-bounce");
          }, 500);

          // 更新数字
          const countEl = this.nextElementSibling;
          let count = parseInt(countEl.textContent.replace(/,/g, ""));
          if (this.classList.contains("fa-heart")) {
            count += 1;
          } else {
            count -= 1;
          }
          countEl.textContent = count.toLocaleString();
        });
      });

      // 转发按钮动画
      document.querySelectorAll(".fa-retweet").forEach((retweet) => {
        retweet.addEventListener("click", function () {
          this.classList.toggle("text-green-500");

          // 添加旋转动画
          this.classList.add("animate-spin");
          setTimeout(() => {
            this.classList.remove("animate-spin");
          }, 500);

          // 更新数字
          const countEl = this.nextElementSibling;
          let count = parseInt(countEl.textContent.replace(/,/g, ""));
          if (this.classList.contains("text-green-500")) {
            count += 1;
          } else {
            count -= 1;
          }
          countEl.textContent = count.toLocaleString();
        });
      });

      // 模拟无限滚动加载更多
      window.addEventListener("scroll", function () {
        if (
          window.innerHeight + window.scrollY >=
          document.body.offsetHeight - 300
        ) {
          // 这里可以添加加载更多的逻辑
          console.log("接近底部，准备加载更多内容");
        }
      });
    </script>
  </body>
</html>
